<template>
  <div class="scheme-box">
    <el-form
      ref="ruleFormRef"
      :model="state.addForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
    >
      <el-row>
        <el-col :span="8">
          <!-- <div class="base-title base-title-first">基本信息</div> -->
          <el-form-item label="基本信息&nbsp;&nbsp;&nbsp;" class="base-title"> </el-form-item>
        </el-col>
      </el-row>
      <el-row class="info-magleft">
        <el-col :span="8">
          <el-form-item label="方案名称：" prop="scName">
            <span class="form-value-box">{{ state.bases.scName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="方案类型：" prop="scType">
            <span class="form-value-box">{{ state.bases.reportName }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="时间信息&nbsp;&nbsp;&nbsp;" class="base-title"> </el-form-item>
        </el-col>
        <!-- <div class="base-title"></div> -->
      </el-row>
      <el-row class="info-magleft">
        <el-col :span="8">
          <el-form-item label="预报时间：" prop="fcTime">
            <span class="form-value-box">{{ state.times.fcTime }}</span>
          </el-form-item></el-col
        >
        <el-col :span="8">
          <el-form-item label="预热期：" prop="yrPerd">
            <span class="form-value-box">{{ state.times.yrPerd }}</span>
          </el-form-item></el-col
        >
        <el-col :span="8">
          <el-form-item label="预见期：" prop="yjPerd">
            <span class="form-value-box">{{ state.times.yjPerd }}</span>
          </el-form-item></el-col
        >
      </el-row>
      <el-row class="info-magleft">
        <el-col :span="8">
          <el-form-item label="计算步长：" prop="time1">
            <div class="content-item">
              <span class="form-value-box">{{ state.times.invt }}</span>
            </div>
          </el-form-item></el-col
        >
        <el-col :span="8">
          <el-form-item label="预报开始时间：" prop="startTime">
            <span class="form-value-box">{{ state.times.fcStart }}</span>
          </el-form-item></el-col
        >
        <el-col :span="8">
          <el-form-item label="预报结束时间：" prop="endTime">
            <span class="form-value-box">{{ state.times.fcEnd }}</span>
          </el-form-item></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="降雨信息&nbsp;&nbsp;&nbsp;" class="base-title"> </el-form-item>
        </el-col>

        <!-- <div class="base-title">降雨信息</div> -->
      </el-row>
      <el-row class="info-magleft">
        <!-- <el-col :span="8">
          <el-form-item label="降雨类型：" prop="rainInfo">
            <span class="form-value-box">{{ state.rains.rainType }}</span>
          </el-form-item></el-col
        > -->
        <el-col :span="8">
          <el-form-item label="站点类型：" prop="station">
            <span class="form-value-box"></span> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="降雨时间间隔：" prop="station">
            <span class="form-value-box">{{ state.rains.intv }}</span>
          </el-form-item></el-col
        >
        <el-col :span="8">
          <el-form-item label="放大形式：" prop="amplify">
            <span class="form-value-box">{{ state.rains.rainZtype }}</span></el-form-item
          ></el-col
        >
      </el-row>
      <el-row class="info-magleft">
        <el-col :span="8">
          <el-form-item label="放大值：" prop="amplifyValue">
            <span class="form-value-box">{{ state.rains.rainZval }}</span>
          </el-form-item></el-col
        >
      </el-row>
      <el-row>
        <!-- <div class="base-title">模型信息</div> -->
        <el-col :span="8">
          <el-form-item label="模型信息&nbsp;&nbsp;&nbsp;" class="base-title"> </el-form-item>
        </el-col>
      </el-row>
      <el-row class="info-magleft">
        <el-col :span="8">
          <el-form-item label="方案类型：" prop="countArea">
            <span class="form-value-box">{{ state.models.calcscType }}</span>
          </el-form-item></el-col
        >
        <el-col :span="7">
          <el-form-item label="区域名称：" prop="areaName">
            <span class="form-value-box">{{ state.models.calcZone }}</span>
          </el-form-item></el-col
        >
        <el-col :span="9">
          <el-form-item label="调度方式：" prop="dispatch">
            <span class="form-value-box dispach-box">{{ state.models.disTypes }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="table-height">
      <el-table :data="state.models.modelSchems" style="width: 100%">
        <el-table-column prop="modelName" label="模型类型名称" width="width" align="center">
        </el-table-column>
        <el-table-column prop="calcscType" label="计算方案类型" width="width" align="center">
        </el-table-column>
        <el-table-column prop="calcScName" label="计算方案名称" width="width" align="center">
        </el-table-column>
        <el-table-column label="参数查看" width="width" align="center">
          <template #default>
            <el-button type="primary">模型参数</el-button>
            <!-- <el-icon
              color="#409EFC"
              class="font-icon"
              @click="handleDelete(scope.$index, scope.row)"
            >
              <Delete />
            </el-icon> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, defineExpose, watch, defineProps } from 'vue'
import {
  // 查询方案详情
  getDispatchSchemeDetail
} from '@/services/modules/dispatch-manage.js'
const state = reactive({
  bases: {},
  times: {},
  rains: {},
  models: {}
})
const props = defineProps({
  scId: {
    type: String,
    default: ''
  }
})

watch(
  () => {
    props.scId
  },
  () => {
    console.log(props.scId, 5555)
    if (props.scId) acceptSchemeDetail(props.scId)
  },
  {
    deep: true,
    immediate: true
  }
)
// 查询方案详情
function acceptSchemeDetail(id) {
  console.log(id, 5656)
  state.bases = {}
  state.times = {}
  state.rains = {}
  state.models = {}
  // scBelong:（0：洪水预报，1：调度预报）
  getDispatchSchemeDetail({ scid: id, scBelong: 0 }).then((res) => {
    if (res.code == 200) {
      console.log(res.data, 202020)
      let { bases, times, rains, models } = res.data
      state.bases = bases
      state.times = times
      state.rains = rains
      state.models = models
      console.log(state.bases, 8686868)
    }
  })
}
</script>
<style lang="less" scoped>
.scheme-box {
  height: 100%;
  margin-left: -28px;
  overflow-y: auto;
  :deep(.el-form) {
    height: 360px;
    .base-title {
      margin-top: 8px;
      .el-form-item__label {
        color: #61affe;
      }
    }
  }
  .info-magleft {
    margin-top: 5px;
    margin-left: 20px;
  }

  // .base-title {
  //   // width: 100px;
  //   // margin-left: 10px;
  //   color: #169bd5;
  //   // margin-bottom: 10px;
  //   // margin-top: 20px;
  // }
  // .base-title-first {
  //   margin-top: 10px;
  // }

  .form-value-box {
    // white-space: nowrap;
    color: black;
  }
  // .dispach-box {
  //   height: auto;
  // }

  :deep(.el-col) {
    height: 30px;
  }
  .flex-bottom {
    display: flex;
    align-items: center;

    .el-form-item {
      margin-bottom: 10px;
    }
  }
  .table-height {
    // height: calc(100% - 360px);
    overflow-y: auto;
    :deep(.el-table--fit) {
      height: 100%;
    }
    // overflow-y: auto;
    // margin-bottom: 20px;
  }
}
</style>
